<template>
  <div class="index">
    <div class="header"></div>
    <div class="container">
      <div class="left">
        <div class="The01">
          <The01Chart></The01Chart>
        </div>
        <div class="The01">
          <The02Chart></The02Chart>
        </div>
      </div>
      <div class="middle">
        <div class="The03">
          <The03Chart></The03Chart>
        </div>
        <div class="The04">
          <The04Chart></The04Chart>
        </div>
      </div>
      <div class="right">
        <div class="The01">
          <The05Chart></The05Chart>
        </div>
        <div class="The04">
          <div class="The06">
            <div class="The07">
              <The06Chart></The06Chart>
            </div>
            <div class="The07">
              <The06Chart></The06Chart>
            </div>
          </div>
          <div class="The08">
            <div class="The077">
              <The06Chart></The06Chart>
            </div>
            <div class="The077">
              <The06Chart></The06Chart>
            </div>
            <div class="The077">
              <The06Chart></The06Chart>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import The01Chart from '.././components/chart1.vue';
import The02Chart from '.././components/chart2.vue';
import The03Chart from '.././components/chart3.vue';
import The04Chart from '.././components/chart4.vue';
import The05Chart from '.././components/chart5.vue';
import The06Chart from '.././components/chart6.vue';
</script>

<style scoped>
.index {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  background-color: #161622;
  height: 100%;
}

.header {
  height: 10%;
  width: 100%;
  background-image: url('../static/Quicker_20241223_135522.png');
  background-size: 100% 100%;
}

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 90%;
  width: 90%;
}

.left {
  height: 100%;
  width: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.middle {
  height: 100%;
  width: 45%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.right {
  height: 100%;
  width: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.The01 {
  height: 100%;
  width: 100%;
  border-radius: 40px;
  padding: 10px;
}

.The03 {
  height: 100%;
  width: 100%;
  border-radius: 40px;
  padding: 10px;
}

.The04 {
  height: 100%;
  width: 100%;
  border-radius: 10px;
  padding: 10px;
  background-color: #232733;
}

.The06 {
  width: 100%;
  height: 50%;
  display: flex;
  justify-content: space-around;
}

.The07 {
  width: 45%;
  height: 100%;
}

.The077 {
  width: 30%;
  height: 100%;
}

.The08 {
  height: 50%;
  width: 100%;
  display: flex;
  justify-content: space-around;
}
</style>
